$bg: #eceaef;
$black: #22222d;
$dark: #55555d;
$middle: #88888d;
$light: #c9c9c9;
$border: #e1e1e1;
$orange: #fbc02d;
$width-out: 960px;
$width-in: 735px;
$width-side: 210px;
*{margin:0;padding:0;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html{font-size:16px}
body{width:100%;min-width:960px;font-family:"Helvetica Neue",Helvetica,"Microsoft YaHei",Arial,STXihei,sans-serif;color:$dark;background-color:$bg}
.mobile{min-width:inherit;background-color:#fff}
a{color:$dark;text-decoration:none}
span{font-size:87.5%;display:inline-block}
h1,h2{color:$black;font-size:112.5%;font-weight:normal}
input[type="text"]{border:none;outline:none;-webkit-appearance:none}
img{width:100%;display:inline-block}
hr{width:100%;border:none;border-top:1px solid $border}
header,section,footer,article,span,div{position:relative}
/* common */
.hidden{display:none!important;}
.mv0{margin-top:0!important;margin-bottom:0!important;}
.dashed{border-top:1px dashed $border}
.img-circle{width:30px;height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}
.pull-right{position:absolute;right:0;top:0}
.text-center{text-align:center}
.wrapper{margin:0 auto;width:$width-out}
.orange{color:$orange}
/* icons */
.icon-eye{margin-right:5px;width:17px;height:12px}
.icon-eye2{margin-right:5px;width:15.5px;height:10.5px}
.icon-right{margin-left:5px;width:15px;height:10px}
.icon-search{width:17px;height:17px}
.icon-menu-close{width:19px;height:17.5px;background:url("../img/icon_catalog_button@2x.png") center center;-webkit-background-size:cover;background-size:cover}
.icon-menu-open{width:17.5px;height:18px;background:url("../img/icon_catalog_button_launch@2x.png") center center;-webkit-background-size:cover;background-size:cover}
/* body */
$nav-height: 80px;
.blog-header{width:100%;height:$nav-height;background-color:#fff;
  -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.1);
  -moz-box-shadow: 0 3px 7px rgba(0,0,0,.1);
  box-shadow: 0 3px 7px rgba(0,0,0,.1);}
.blog-wrapper{margin:35px auto 65px auto;width:$width-out}
.blog-wrapper-footer{margin:auto;width:$width-out}
.blog-main{width:$width-in;padding:30px 40px 135px 40px;background-color:#fff;border:1px solid $border;vertical-align:top;display:inline-block}
.blog-side{margin-left:10px;width:$width-side;vertical-align:top;display:inline-block}
.blog-footer{width:100%;height:300px;background-color:#333}
/* header */
.blog-top-logo{position:absolute;margin:15px auto;width:auto;height:50px;display:inline-block}
.blog-nav{width:$width-in;height:$nav-height;line-height:$nav-height;text-align:right;display:inline-block}
.blog-nav>a{margin-left:45px}
.blog-nav>a.selected{color:$orange}
.contact{margin-left:10px;width:$width-side;text-align:right;display:inline-block}
.contact>span{margin-left:15px;height:25px;line-height:0;vertical-align:middle}
.contact>span>img:first-child{width:auto;height:25px;cursor:pointer}
.code{position:absolute;top:30px;left:-58px;width:149px;height:178px;text-align:center;z-index:99;
  background:url("../img/public_shadow.png") center center;-webkit-background-size:cover;background-size:cover}
.lefter{left:-67px}
.code>img{margin:27px 17px 13px;width:115px;height:auto}
.code>p{margin:auto 17px;width:115px;font-size:80%}
/* side */
.blog-side-block{margin-bottom:15px;padding:15px 20px;background-color:#fff;border:1px solid $border}
.blog-side-block:hover{
  -webkit-box-shadow:  0 0 7px rgba(0,0,0,.1);
  -moz-box-shadow:  0 0 7px rgba(0,0,0,.1);
  box-shadow:  0 0 7px rgba(0,0,0,.1);}
.blog-side-block>.dashed{margin-top:15px}
.blog-side-block>ul>li{margin:15px auto;font-size:87.5%;text-indent:1em;list-style-type:none}
.blog-side-block>ul>li>a:hover{color: $orange}
.blog-side-banner{margin-bottom:10px;width:100%;line-height:0;display:block}
.blog-side-banner>img{width:100%;height:auto}
.search-box{margin-top:20px;width:100%;height:30px;border:1px solid $border;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.search-box>input{width:100%;padding:0 55px 0 10px;color:#d9dee1;font-size:87.5%;line-height:28px;background-color:transparent}
.search-box>.pull-right{margin-top:-1px;margin-right:-1px;width:50px;height:30px;background-color:$orange;cursor:pointer;border-top-right-radius:5px;border-bottom-right-radius:5px}
.search-box>.pull-right>.icon-search{margin-top:6px;margin-left:15px}
/* content */
.blog-list{list-style-type:none}
.blog-list>li{margin-bottom:60px}
.blog-article>hr{margin:10px auto}
.blog-article>.info{margin-bottom:15px;height:30px;color:#c2cbdc;font-size:87.5%}
.blog-article>.info>p{margin-left:5px;vertical-align:top;line-height:30px;display:inline-block}
.blog-article>.cover{width:100%;height:250px;display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.blog-article>.intro{margin:20px auto 25px auto;line-height:1.8;text-align:justify}
.blog-article>.content{margin:20px auto 25px auto;line-height:1.8;text-align:justify}
.content span{display:inline}
.content img{width:100%!important;height:auto!important;}
.blog-article>footer{font-size:87.5%}
.blog-article>.share{position:absolute;width:100%;bottom:-115px;text-align:center}
.share>.icons{margin-bottom:10px}
.share>.icons>a{margin:auto 5px;width:38px;display:inline-block;cursor:pointer}
/* page */
//.page{width:auto;height:35px;border:1px solid $border;display:inline-block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
//.page>span{padding:0 13px 0 10px;height:33px;line-height:33px;border-right:1px solid $border;list-style-type:none;cursor:pointer}
//.page>span:last-child{border-right:none}
//.page>span>a{color:#ffd775}
//.page>span.disable>a{color:#a5a5a5}
//.page>span.selected{margin-top:-1px;margin-left:-6px;padding:0 13px;height:35px;background-color:#ffd775;border:1px solid $orange}
//.page>span.selected>a{color:#fff}
.pagination{width:auto;height:35px;border:1px solid $border;display:inline-block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.pagination>ul>li{height:33px;line-height:33px;font-size:87.5%;display:inline-block}
.pagination>ul>li>a{padding:0 13px 0 10px;height:33px;line-height:33px;color:#ffd775;border-right:1px solid $border;display:inline-block;cursor:pointer}
.pagination>ul>li:last-child>a{border-right:none}
.pagination>ul>li.disabled>a{color:#a5a5a5}
.pagination>ul>li.active{}
.pagination>ul>li.active>a{margin-top:-1px;margin-left:-6px;padding:0 13px;height:35px;color:#fff;background-color:#ffd775;border:1px solid $orange}
.pagination>ul>li.controls>a{cursor:default}
.controls>a>input{margin:auto -3px;width:2em;color:#a5a5a5;font-size:100%;text-align:center;pointer-events:not}
/* footer */
.blog-main-footer{padding:30px 0;width:$width-in;height:300px;color:#fff}
.blog-main-footer>.right{position:absolute;right:0;top:30px;width:185px;height:auto}
.blog-main-footer>p{position:absolute;bottom:30px;width:100%;font-size:90%;text-align:center}
.footer-list{margin-right:75px;vertical-align:top;letter-spacing:5px;line-height:2.2;list-style-type:none;display:inline-block}
.footer-list>li>a{font-size:87.5%;color:rgba(255,255,255,.8)}
/*----------------- mobile -----------------*/
$mobile-top-height: 56px;
.blog-mobile-header{position:fixed;top:0;left:0;right:0;width:100%;height:$mobile-top-height;padding:0 15px;background-color:#fff;z-index:9990;
  -webkit-box-shadow:0 3px 5px rgba(0,0,0,.1);-moz-box-shadow:0 3px 5px rgba(0,0,0,.1);box-shadow:0 3px 5px rgba(0,0,0,.1)}
.blog-mobile-header>img{margin:10px;width:125px;height:auto}
.blog-mobile-header>.icon-menu-close,.blog-mobile-header>.icon-menu-open{position:absolute;top:20px;right:20px}
.blog-mobile-header>.blog-mobile-nav{position:absolute;padding:15px 10px 0 10px;width:103.5px;height:133px;top:40px;right:8px;background:url("../img/menu_background@2x.png") center center;-webkit-background-size:cover;background-size:cover}
.blog-mobile-nav>a{width:100%;font-size:75%;line-height:35px;text-align:center;color:$middle;border-bottom:1px solid $border;display:block}
.blog-mobile-nav>a:last-child{border-bottom:none}

.blog-mobile-list{width:100%;margin:$mobile-top-height auto;padding:25px 15px}
.blog-mobile-list>li,.more{margin-bottom:15px;list-style-type:none;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.1);-moz-box-shadow:0 1px 5px rgba(0,0,0,.1);box-shadow:0 1px 5px rgba(0,0,0,.1)}
.clear{color:$middle;text-align:center;font-size:12px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.blog-mobile-article>.cover{width:100%;height:125px}
.blog-mobile-article>h1{margin:10px;font-size:90%}
.blog-mobile-article>footer{margin:auto 10px;padding-bottom:10px;color:$light;font-size:80%}
.blog-mobile-article>footer.detail{margin:20px 10px;padding-bottom:0}
.blog-mobile-article>footer>.name{margin-right:10px;color:$middle;vertical-align:text-top}
.blog-mobile-article>.content{margin:25px 5px;font-size:62.5%}
.blog-mobile-article>.share{color:$dark;font-size:62.5%;text-align:right}
.blog-mobile-article>.share>.icons>a{width:30px;display:inline-block}
.more{padding:10px 0;width:100%;font-size:90%;color:$middle;text-align:center}
/* download */
.download{position:fixed;width:100%;height:49px;left:0;right:0;bottom:0;background:rgba(0,0,0,.9)}
.download>img{margin-left:30px;margin-top:7px;width:120px;height:auto}
.download>a{position:absolute;top:11px;right:20px;width:95px;height:25px;font-size:90%;line-height:24px;text-align:center;color:#fff;border:1px solid #fff;
  -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}